<template>
	<view class="box">
		<view class="phone">
			<image mode="aspectFit" class="img2" src="../../static/logo2.png"></image>
			<uni-forms ref="form" :modelValue="login1" :rules="rules">
				<uni-forms-item name="phone">
					<uni-easyinput type="number" v-model="login1.phone" placeholder="请输入您的手机号" />
				</uni-forms-item>
				<uni-forms-item name="verifyCode">
					<uni-easyinput type="text" v-model="login1.verifyCode" placeholder="请输入验证码" />
					<button size="mini" @click="yanzm" class="bt2">发送验证码</button>
				</uni-forms-item>
				<view class="xieyi">
					<checkbox class='round blue' :class="flag ? 'checked':''" @click="tyxy" value="flag"></checkbox><text @click="xy">同意接受用户协议</text>
				</view>
				<button class="but1" @click="phonelogin">登录</button>
			</uni-forms>
		</view>
		<view class="dlfs">
			或通过以下方式登录
		</view>
		
		<view class="iconbox">
			<view class="icon" @click="ha('weixin')">
				<image src="../../static/images/wx.png" mode="aspectFit" class="img1"></image>
				<view class="text1">微信登录</view>
			</view>
			<view class="icon" @click="ha('qq')">
				<image src="../../static/images/QQ.png" mode="aspectFit" class="img1"></image>
				<view class="text1">QQ登录</view>
			</view>
		</view>
		
		<view style="text-align: center;color: #ccc; margin-top: 5vh;font-size: 12px;">
			<view class="cuIcon-phone">联系方式：18866666666(电话)</view>
		</view>
		<view style="text-align: center;color: #ccc;font-size: 12px;">
			技术支持：
			<image src="../../static/images/yykj.jpg" style="width: 20px; height: 20px;margin: 0 5px; vertical-align: middle;"></image>
			合肥玥云科技
		</view>
	</view>
</template>

<script>
	import {login,send,QQadd} from "../../utils/api.js"
	export default {
		data() {
			return {
				flag:false,
				login1:{
					flag1:false,
					phone:"",
					verifyCode:""
				},
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, 
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '请输入11位手机号',
						}]
				
					},
					
				}
			}
		},
		methods: {
			async yanzm() {
				console.log(this.login1.phone)
				const res = await send(this.login1.phone)
				console.log(res)
				let s = 60
				this.flag1 = true
				const time = setInterval(() => {
					this.phoneyzm = `${--s}秒后重新发送`
					if (s <= 0) {
						clearInterval(time)
						this.phoneyzm = '发送验证码'
						this.flag1 = false
					}
				}, 1000)
			},
			async phonelogin(){
				this.$refs.form.validate().then(async res => {
					console.log('表单数据信息：', res);
					if(this.flag){
						// console.log(this.login1)
						const {data:res} = await login(this.login1)
						console.log(res)
						// uni.setStorageSync('user',res.data.id)
						this.$store.commit('SET_USER',res.data)
						uni.showToast({
							title: '登录成功'
						})
						uni.switchTab({url:'/pages/my/my'})
						
					}else{
						uni.showToast({
							icon:"error",
							title:"请同意用户协议"
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
				
			},
			ha(way) {
				if(this.flag){
					uni.login({
						provider: way,
						univerifyStyle: true,
						success: (res) => {
							console.log(res)
							uni.getUserInfo({
								provider: way,
								lang: 'zh_CN',
								success: async(UserInfo) => {
									console.log(UserInfo.userInfo)
									const {data:qqres} = await QQadd(UserInfo.userInfo)
									// console.log(qqres)
									this.$store.commit('SET_USER',qqres.data)
									uni.showToast({
										title: '登录成功'
									})
									uni.switchTab({url:'/pages/my/my'})
									
								}
							})
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}else{
					uni.showToast({
						icon:"error",
						title:"请同意用户协议"
					})
				}
			},
			tyxy(){
				this.flag = !this.flag
			},
			zhuce(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			xy(){
				uni.navigateTo({
					url:"../yonghuxieyi/yonghuxieyi"
				})
			}
		}
	}
</script>

<style scoped>
	.box{
		background-color: #FFFFFF;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		
	}
	.iconbox{
		display: flex;
		justify-content: center;
	}
	.wx{
		color: #39B54A;
	}
	.icon{
		margin: 10px;
		width: 22vw;
		text-align: center;
	}
	.text1{
		font-size: 12px;
	}
	.img1{
		width: 35px;
		height: 35px;
	}
	.dlfs{
		margin-top: 15vh;
		padding: 10px 0;
		font-size: 12px;
		color: #666;
		text-align: center;
	}
	.tit{
		font-size: 25px;
		font-weight: bold;
		margin-bottom: 5vh;
	}
	.but1{
		background-color: #3F9D83;
		color: #FFFFFF;
		margin: 25px 0;
	}
	.xieyi{
		width: 100%;
		color: #3F9D83;
		text-decoration: underline;
	}
	.xieyi text{
		margin-left: 10px;
	}
	>>>.uni-forms-item__inner{
		padding-bottom: 25px;
	}
	uni-checkbox >>>.uni-checkbox-input{
		height: 16px!important;
		width: 16px!important;
	}
	uni-radio::before, uni-checkbox::before{
		right: 0!important;
		font-size: 16px;
	}
	.bt2{
		margin-left: 20px;
		width: 130px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	>>>.uni-forms-item__content{
		display: flex;
	}
	.img2{
		height: 100rpx;
		margin-bottom: 30px;
	}
</style>
